<template>
  <div>
    <div id="qrcode" class="qrcode-border" ref="qrcode"></div>
    <button @click="updateCode">替换</button>
    <button @click="clearCode">清楚</button>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2';
export default {
  data() {
    return {
      qrcode: null
    }
  },
  methods: {
    createEcode() {
      let text = '二维码内容';
      this.qrcode = new QRCode(this.$refs.qrcode, {
        text: text, //二维码内容字符串
        // width: 128, //图像宽度
        // height: 128, //图像高度
        width: 128 * 3, //宽扩大3倍
        height: 128 * 3, //高扩大3倍
        colorDark: '#000000', //二维码前景色
        colorLight: '#ffffff', //二维码背景色
        correctLevel: QRCode.CorrectLevel.H, //容错级别
      })
    },
    clearCode() {
      this.$refs.qrcode.innerHTML = '';
    },
    updateCode() {
      let string = '新的内容'
      this.qrcode.makeCode(string)
    }
  },
  mounted() {
    this.createEcode()
  }
}
</script>

<style lang="scss" scoped>
.qrcode-border {
  display: flex;
  width: 128px;
  height: 128px;
  box-sizing: border-box;
  padding: 10px;
  /*利用padding*/
  border: 1px solid rgb(204, 204, 204);

  canvas,
  img {
    width: 100%;
    height: 100%;
  }
}
</style>